<template>
	
	<view class="hotelForm-change">
		<view class="hotelForm-title">
			<view class="title1" :class="[n==0? 'active' : ''] " @click="titleGai(0)">国内</view>
			<view class="title2" :class="[n==1? 'active' : ''] " @click="titleGai(1)">国际</view>
			<view class="title3" :class="[n==2 ? 'active' : ''] " @click="titleGai(2)">民宿</view>
		</view>
		<view class="hotelForm-search">
			<uni-data-picker video  style="z-index: 7;" class="hotelForm-search-piker" placeholder="请选择入住地区" popup-title="请选择入住地区" :localdata="dataTree" v-model="classes"
				@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
			</uni-data-picker>
		</view>
		<view class="hotelForm-data">
		<uni-datetime-picker class="hotelForm-data-picker" v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
		</view>
		<view class="hotelForm-tishi">
			<uni-notice-bar class="hotel-notice-bar" show-icon scrollable
				text="第一次去济州岛真的好开心，提前做好了攻略，去的那天我的内心是压制不住的开心…" />

		</view>
		<view class="hotelForm-sousuo">
			<button class="hotelForm-btn" type="primary">搜索酒店</button>
		</view>
	</view>
	
</template>
<script>
	export default {
		data() {
			return {
				single: '2021-04-03',
				n: 0,
				classes: '1-1',
				datetimesingle: '',
				datetimerange: [],
				dataTree: [{
						text: "北京",
						value: "1-0",
						children: [{
								text: "北京一区",
								value: "1-1"
							},
							{
								text: "北京二区",
								value: "1-2"
							}
						]
					},
					{
						text: "上海",
						value: "2-0",
						children: [{
								text: "上海一区",
								value: "2-1"
							},
							{
								text: "上海二区",
								value: "2-2"
							}
						]
					},
					{
						text: "南京",
						value: "3-0",
						disable: true
					}
				]
			}
		},
		methods: {
			titleGai(e) {
				this.n = e
			},
			onnodeclick(e) {
				console.log(e);
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				console.log('onchange:', e);
			}
			
		}

	};
</script>

<style lang="scss" scoped>
	.hotelForm-change {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		.hotelForm-title {
			width: 100%;
			height: 16%;
			background-color: #f2f2f2;
		}

		.hotelForm-search {
			width: 100%;
			height: 22%;
			background-color: #fff;
			.hotelForm-search-piker{
				width:100%;
				height:100%;
				::v-deep .input-value{
					width:690rpx;
					height:100%;
					font-size: 36rpx;
				}
				::v-deep .input-value-border{
					border: none;
				}
			}
			.title {
				font-size: 36rpx;
				font-weight: bold;
				margin: 20px 0 5px 0;
			}

			.data-pickerview {
				height: 400px;
				border: 1px #e5e5e5 solid;
			}

			.popper__arrow {
				top: -6px;
				left: 50%;
				margin-right: 3px;
				border-top-width: 0;
				border-bottom-color: #EBEEF5;
			}

			.popper__arrow {
				top: -6px;
				left: 50%;
				margin-right: 3px;
				border-top-width: 0;
				border-bottom-color: #EBEEF5;
			}
			::v-deep .placeholder{
				font-size: 36rpx;
			}
			
		}

		.hotelForm-data {
			width: 100%;
			height: 22%;
			.hotelForm-data-picker{
				width: 100%;
				height: 100%;
				padding: 0 2rpx;
				::v-deep .uni-calendar--fixed{
					position: fixed;
					bottom: -65px;
					// height: 200px;
					// top:5rpx;
					background-color: #fff;
				}
				::v-deep .uni-calendar__box{
					background-color: #fff;
				}
				::v-deep .uni-date__x-input{
					font-size: 30rpx;
					justify-content: center;
					width:302rpx;
					height: 125rpx;
					align-items: center;
				}
				::v-deep .uni-calendar__content-mobile{
					flex-direction: column;
				}
				::v-deep .uni-calendar__box{
					flex-direction: column;
				}
				::v-deep .uni-date-btn--ok{
					padding: 3px 15px;
				}
				::v-deep .uni-datetime-picker--btn{
					width: 80%;
					text-align: center;
					justify-content: center;
					margin: 0 auto;
				}
				::v-deep .uni-date-changed{
					background-color: #fff;
					z-index: 100 !important;
				}
				
				
			}
		}

		.hotelForm-tishi {
			width: 100%;
			height: 15%;

			.hotel-notice-bar {
				height: 100%;
			}
		}

		.hotelForm-sousuo {
			width: 100%;
			height: 25%;
			display: flex;
			justify-content: center;
			align-items: center;

			.hotelForm-btn {
				width: 80%;
				height: 60%;
				border-radius: 100rpx;
			}
		}
	}

	// 特殊情况
	.hotelForm-title {

		.title1,
		.title2,
		.title3 {
			width: 33.333%;
			height: 100%;
			justify-content: center;
			align-items: center;
		}


	}

	.active {

		background-color: #fff;
	}
</style>
